<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
	<include file="Inc/basic_css"/>
	<include file="Inc/basic_js"/>
	<import type="js" basepath="__JS__" file="admin" />
	<script src="__PLUGIN__/echart/echarts.common.js"></script>
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body class="page-header-fixed">
<!-- BEGIN HEADER -->
<include file="Inc/head"/>
<!-- END HEADER -->
<div class="clearfix"></div>
<!-- BEGIN CONTAINER -->
<div class="page-container">
	<!-- BEGIN SIDEBAR -->
	<include file="Inc/left"/>
	<!-- END SIDEBAR -->
	<!-- BEGIN PAGE -->
	<div class="page-content">
		<!-- END SAMPLE PORTLET CONFIGURATION MODAL FORM-->
		<!-- BEGIN STYLE CUSTOMIZER -->
		<include file="Inc/theme"/>
		<!-- END BEGIN STYLE CUSTOMIZER -->
		<!-- BEGIN PAGE HEADER-->
		<div class="row">
			<div class="col-md-12">
				<!-- BEGIN PAGE TITLE & BREADCRUMB-->
				<h3 class="page-title">
					访问趋势 <small></small>
				</h3>
				<ul class="page-breadcrumb breadcrumb">
					<li><i class="fa fa-home"></i><a href="{:U('Index/index')}">首页</a> <i class="fa fa-angle-right"></i></li>
					<li><a href="#">图表统计</a><i class="fa fa-angle-right"></i></li>
					<li><a href="#">访问趋势</a></li>
				</ul>					<!-- END PAGE TITLE & BREADCRUMB-->
			</div>
		</div>
		<!-- END PAGE HEADER-->
		<!-- BEGIN PAGE CONTENT-->
		<div class="row">
			<div class="col-md-12">
				<!-- BEGIN EXAMPLE TABLE PORTLET-->
				<div id="main" style="width: auto;height:400px;"></div>
			</div>
		</div>

		<!-- END PAGE CONTENT -->
	</div>

</div>
<!-- END CONTAINER -->
<!-- BEGIN FOOTER -->
<include file="Inc/foot"/>
<!-- END FOOTER -->
<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->

<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->

<script src="__JS__/form-components.js"></script>
<script src="__JS__/app.js" type="text/javascript"></script>
<script src="__JS__/myChart.js" type="text/javascript"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<script>
	jQuery(document).ready(function() {
		App.init(); // initlayout and core plugins
		FormComponents.init();
	});
</script>
<script>

	var date=[<PHP>foreach($dataList['date'] as $item){ echo "'$item',"; }</PHP>];
	var session_cnt=[<PHP>foreach($dataList['session_cnt'] as $item){ echo "'$item',"; }</PHP>];
	var visit_pv=[<PHP>foreach($dataList['visit_pv'] as $item){ echo "'$item',"; }</PHP>];
	var visit_uv=[<PHP>foreach($dataList['visit_uv'] as $item){ echo "'$item',"; }</PHP>];
	var visit_uv_new=[<PHP>foreach($dataList['visit_uv_new'] as $item){ echo "'$item',"; }</PHP>];
	var stay_time_uv=[<PHP>foreach($dataList['stay_time_uv'] as $item){ echo "'$item',"; }</PHP>];
	var stay_time_session=[<PHP>foreach($dataList['stay_time_session'] as $item){ echo "'$item',"; }</PHP>];
	var visit_depth=[<PHP>foreach($dataList['visit_depth'] as $item){ echo "'$item',"; }</PHP>];
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));
	var posList = [
		'left', 'right', 'top', 'bottom',
		'inside',
		'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
		'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
	];

	myChart.configParameters = {
		rotate: {
			min: -90,
			max: 90
		},
		align: {
			options: {
				left: 'left',
				center: 'center',
				right: 'right'
			}
		},
		verticalAlign: {
			options: {
				top: 'top',
				middle: 'middle',
				bottom: 'bottom'
			}
		},
		position: {
			options: echarts.util.reduce(posList, function (map, pos) {
				map[pos] = pos;
				return map;
			}, {})
		},
		distance: {
			min: 0,
			max: 100
		}
	};

	myChart.config = {
		rotate: 90,
		align: 'left',
		verticalAlign: 'middle',
		position: 'insideBottom',
		distance: 15,
		onChange: function () {
			var labelOption = {
				normal: {
					rotate: myChart.config.rotate,
					align: myChart.config.align,
					verticalAlign: myChart.config.verticalAlign,
					position: myChart.config.position,
					distance: myChart.config.distance
				}
			};
			myChart.setOption({
				series: [{
					label: labelOption
				}, {
					label: labelOption
				}, {
					label: labelOption
				}, {
					label: labelOption
				}]
			});
		}
	};


	var labelOption = {
		show: true,
		position: myChart.config.position,
		distance: myChart.config.distance,
		align: myChart.config.align,
		verticalAlign: myChart.config.verticalAlign,
		rotate: myChart.config.rotate,
		formatter: '{c}  {name|{a}}',
		fontSize: 16,
		rich: {
			name: {
				textBorderColor: '#fff'
			}
		}
	};

	option = {
		title: {
			text: '14日小程序访问趋势'
		},
		color: ['#003366', '#006699', '#4cabce', '#e5323e','#91c7ae','green','#d48265'],
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		legend: {
			data: ['打开次数', '访问次数', '访问人数', '新用户数', '人均停留时长(s)','次均停留时长(s)','平均访问深度']
		},
		toolbox: {
			show: true,
			orient: 'vertical',
			left: 'right',
			top: 'center',
			feature: {
				mark: {show: true},
				dataView: {show: true, readOnly: false},
				magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
				restore: {show: true},
				saveAsImage: {show: true}
			}
		},
		xAxis: [
			{
				type: 'category',
				axisTick: {show: false},
				data: date
			}
		],
		yAxis: [
			{
				type: 'value'
			}
		],
		series: [
			{
				name: '打开次数',
				type: 'line',
				barGap: 0,
				//label: labelOption,
				data: session_cnt
			},
			{
				name: '访问次数',
				type: 'line',
				//label: labelOption,
				data: visit_pv
			},
			{
				name: '访问人数',
				type: 'line',
				//label: labelOption,
				data: visit_uv
			},
			{
				name: '新用户数',
				type: 'line',
				//label: labelOption,
				data: visit_uv_new
			},
			{
				name: '人均停留时长(s)',
				type: 'bar',
				//label: labelOption,
				data: stay_time_uv
			},
			{
				name: '次均停留时长(s)',
				type: 'bar',
				//label: labelOption,
				data: stay_time_session
			},
			{
				name: '平均访问深度',
				type: 'bar',
				//label: labelOption,
				data: visit_depth
			}
		]
	};

	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
</script>
<!-- END PAGE LEVEL SCRIPTS -->
</body>
<!-- END BODY -->
</html>